<template>
  <aside class="aside">
    <div class="tabWraped">
      <h4 class="active">相关分类</h4>
      <h4>推荐品牌</h4>
    </div>
    <div class="tabContent">
      <div class="tab-pane active">
        <ul class="partList">
          <li>手机</li>
          <li>手机壳</li>
          <li>内存卡</li>
          <li>Iphone配件</li>
          <li>贴膜</li>
          <li>手机耳机</li>
          <li>移动电源</li>
          <li>平板电脑</li>
        </ul>
        <ul class="goodsList">
          <li>
            <div class="list-wrap">
              <div class="p-img">
                <img src="./images/part01.png" />
              </div>
              <div class="attr">Apple苹果iPhone 6s (A1699)</div>
              <div class="price">
                <em>¥</em>
                <i>6088.00</i>
              </div>
              <div class="operate">
                <a href="javascript:void(0);">加入购物车</a>
              </div>
            </div>
          </li>
          <li>
            <div class="list-wrap">
              <div class="p-img">
                <img src="./images/part02.png" />
              </div>
              <div class="attr">
                <em>Apple苹果iPhone 6s (A1699)</em>
              </div>
              <div class="price">
                <strong>
                  <em>¥</em>
                  <i>6088.00</i>
                </strong>
              </div>
              <div class="operate">
                <a href="javascript:void(0);">加入购物车</a>
              </div>
            </div>
          </li>
          <li>
            <div class="list-wrap">
              <div class="p-img">
                <img src="./images/part03.png" />
              </div>
              <div class="attr">
                <em>Apple苹果iPhone 6s (A1699)</em>
              </div>
              <div class="price">
                <strong>
                  <em>¥</em>
                  <i>6088.00</i>
                </strong>
              </div>
              <div class="operate">
                <a href="javascript:void(0);">加入购物车</a>
              </div>
            </div>
          </li>
          <li>
            <div class="list-wrap">
              <div class="p-img">
                <img src="./images/part02.png" />
              </div>
              <div class="attr">
                <em>Apple苹果iPhone 6s (A1699)</em>
              </div>
              <div class="price">
                <strong>
                  <em>¥</em>
                  <i>6088.00</i>
                </strong>
              </div>
              <div class="operate">
                <a href="javascript:void(0);">加入购物车</a>
              </div>
            </div>
          </li>
          <li>
            <div class="list-wrap">
              <div class="p-img">
                <img src="./images/part03.png" />
              </div>
              <div class="attr">
                <em>Apple苹果iPhone 6s (A1699)</em>
              </div>
              <div class="price">
                <strong>
                  <em>¥</em>
                  <i>6088.00</i>
                </strong>
              </div>
              <div class="operate">
                <a href="javascript:void(0);">加入购物车</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="tab-pane">
        <p>推荐品牌</p>
      </div>
    </div>
  </aside>
</template>

<script>
export default {
  name: "Aside",
};
</script>

<style scoped lang="less">
.aside {
  width: 210px;
  float: left;
  border: 1px solid #ccc;
  .tabWraped {
    height: 40px;
    h4 {
      border-top: 3px solid #fff;
      float: left;
      line-height: 37px;
      width: 105px;
      text-align: center;
      border-bottom: 1px solid #ccc;
      &.active {
        border-top: 3px solid #e1251b;
        border-bottom: 0;
        font-weight: normal;
      }
    }
  }
  .tabContent {
    padding: 10px;
    .tab-pane {
      display: none;
      &.active {
        display: block;
      }
      &:nth-child(1) {
        .partList {
          overflow: hidden;
          li {
            width: 50%;
            float: left;
            border-bottom: 1px dashed #ededed;
            line-height: 28px;
          }
        }
        .goodsList {
          & > li {
            margin: 5px 0 15px;
            border-bottom: 1px solid #ededed;
            padding-bottom: 5px;
            .list-wrap {
              .p-img {
                text-align: center;
                img {
                  width: 152px;
                }
              }
              .price {
                font-size: 16px;
                color: #c81623;
              }
              .operate {
                text-align: center;
                margin: 5px 0;
                a {
                  background-color: transparent;
                  border: 1px solid #8c8c8c;
                  color: #8c8c8c;
                  display: inline-block;
                  padding: 2px 14px;
                  line-height: 18px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
